<template>
  <div class="centermap">
    <div class="mapwrap">
      <locationMap/>
    </div>
  </div>
</template>

<script>
import xzqCode from '@/utils/map/xzqCode';
import * as echarts from 'echarts';
import { GETNOBASE } from '@/utils/map/index';
import locationMap from './location-map.vue'
export default {
  components: { locationMap },
  data () {
    return {
      maptitle: '设备分布图',
      options: {},
      code: '320000', // china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, // 是否要展示南海群岛  修改此值请刷新页面
      isMap: false
    };
  },
  created () {},

  mounted () {
    // this.getData('320000');
  },
  methods: {
    getData (code) {
      const res = {
        success: true,
        data: {
          dataList: [
            // {
            //   name: '江苏省',
            //   value: 2000
            // },
            {
              name: '苏州市',
              corp: '苏州黑猫（集团）有限公司',
              value: 531
            },
            {
              name: '无锡市',
              corp: '苏州黑猫（集团）有限公司',
              value: 817
            },
            {
              name: '南京市',
              corp: '苏州黑猫（集团）有限公司',
              value: 219
            },
            {
              name: '泰州市',
              corp: '苏州黑猫（集团）有限公司',
              value: 0
            }
          ],
          regionCode: code
        }
      }
      if (res.success) {
        this.getGeojson(res.data.regionCode, res.data.dataList);
        this.mapclick();
      } else {
        this.$message.error(res.msg)
      }
    },
    /**
     * @description: 获取geojson
     * @param {*} name china 表示中国 其他省份行政区编码
     * @param {*} mydata 接口返回列表数据
     * @return {*}
     */
    async getGeojson (name, mydata) {
      this.code = name;
      // 如果要展示南海群岛并且展示的是中国的话
      let geoname = name
      if (this.isSouthChinaSea && name === 'china') {
        geoname = 'chinaNanhai';
      }
      // 如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name)
      if (mapjson) {
        mapjson = mapjson.geoJson;
      } else {
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
          return res;
        });
        echarts.registerMap(name, mapjson);
      }
      const cityCenter = {};
      const arr = mapjson.features;
      // 根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] = item.properties.centroid || item.properties.center;
      });
      const newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            corp: item.corp,
            value: cityCenter[item.name].concat(item.value)
          });
        }
      });
      this.init(name, mapjson, newData);
    },
    init (name, mapjson, mapData) {
      // 目标数据格式
      const markPointData = []; const brr = [];
      for (const i of mapData) {
        if (i.value === 0) {
          brr.push(i.name)
        }
      }
      for (const j of brr) {
        for (const k of mapjson.features) {
          if (j === k.properties.name) {
            markPointData.push({
              name: j,
              value: k.properties.center
            })
          }
        }
      }
      const option = {
        // height: '500px',
        visualMap: {
          type: 'piecewise',
          show: true,
          min: 0,
          max: 1000000,
          left: '10%',
          bottom: '15%',
          showLabel: true,
          itemWidth: 12,
          itemHeight: 12,
          zlevel: 2,
          // seriesIndex: 0,
          // text: ["高", "低"],
          textStyle: {
            // color: "#ffffff",
            color: '#06fcff'
          },
          pieces: [
            {
              min: 1000,
              max: 9999,
              label: '1000-9999',
              // symbol: "roundRect",
              color: '#D5514D'
            },
            {
              min: 100,
              max: 999,
              label: '100-999',
              // symbol: "roundRect",
              color: '#E57C6D'
            },
            {
              min: 10,
              max: 99,
              label: '10-99',
              // symbol: "roundRect",
              color: '#F19D8A'
            },
            {
              min: 1,
              max: 9,
              label: '1-9',
              // symbol: "roundRect",
              color: '#FBE6DC'
            },
            {
              value: 0,
              label: '0',
              // color: "#ffffff",
              color: { // 径向渐变
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: '#040E3B' // 0% 处的颜色
                }, {
                  offset: 1, color: '#082750' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          ]
        },
        tooltip: {
          trigger: 'item',
          // 自定义提示框的内容
          /** 这里自定义显示的值是data中value数组的第二个值 **/
          formatter (params) {
            if (params.data) {
              return (
                '<div>' +
                params.data.corp +
                ' <br> ' +
                '省份总额度：' +
                params.data.value[2] +
                '（万元）</div>'
              );
            } else {
              return ''
            }
          }
        },
        geo: {
          map: '320000',
          zoom: 1,
          top: '5%',
          zlevel: 0,
          label: {
            show: false
          },
          itemStyle: {
            areaColor: '#07183F',
            shadowColor: '#1863DE',
            shadowOffsetY: 15,
            shadowOffsetX: 2
          }
        },
        series: [
          {
            type: 'map',
            map: '320000',
            zoom: 1,
            top: '5%',
            zlevel: 1,
            label: {
              show: true,
              fontSize: '14',
              color: '#00D9A9'
            },
            itemStyle: {
              // areaColor: '#07183F',
              // areaColor: { // 单向渐变
              //   type: 'linear',
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [{
              //       offset: 0, color: '#040E3B' // 0% 处的颜色
              //   }, {
              //       offset: 1, color: '#144975' // 100% 处的颜色
              //   }],
              //   global: false // 缺省为 false
              // },
              areaColor: { // 径向渐变
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: '#040E3B' // 0% 处的颜色
                }, {
                  offset: 1, color: '#082750' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderWidth: 2,
              borderColor: '#3680A8',
              shadowColor: '#3680A8'
              // shadowOffsetY: 15,
              // shadowOffsetX: 0,
            },
            // geoIndex: 0,
            data: mapData
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            // symbol: 'image://',
            symbolSize: 8, // 图形大小
            zlevel: 3,
            label: {
              show: false
            },
            data: markPointData
          }
        ]
      };
      this.options = option;
    },
    message (text) {
      this.$message.warning(text)
    },
    mapclick () {
      if (this.echartBindClick) return;
      // 单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap1.chart.on('click', (params) => {
        this.isMap = true
        const xzqData = xzqCode[params.name];
        if (xzqData) {
          this.getData(xzqData.adcode);
        } else {
          this.$message.success('暂无下级地市!')
        }
      });
      this.echartBindClick = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.centermap {
  // margin-bottom: 30px;
  .maptitle{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url('~@/assets/images/iot/map-top.png');
    background-position: left top, right bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: cover;

    .titletext{
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      background: linear-gradient(92deg, #28A6FF 0%, #72F9F5 48.8525390625%, #28A6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .mapwrap {
    height: 820px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;
    #CenterMap1{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
